/*
 * @Description: 线路详情头部线路信息栏
 * @Author: yingying.fan
 * @Date: 2019-05-23 13:47:54
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-23 18:10:35
 */
<template>
  <div class="route-header">
    <!-- 首末站 -->
    <div class="flex-h flex-vc fontsize32 route-station-wrapper">
      <p>{{routeInfo&&routeInfo.startStation}}</p>
      <div
        class="reverse-btn"
        @click="changeDirection"
      >
        <i
          class="iconfont icon-revesing"
          :class="[canChangeDirection?'baseBgColorNoActive':'reverse-i-ccc']"
        ></i>
      </div>
      <p>{{routeInfo&&routeInfo.endStation}}</p>
    </div>
    <!-- 票价和发车时间 -->
    <div
      v-if="showPriceLine"
      class="flex-h flex-hc flex-vc fontsize24 xb_border eee price-time-wrapper"
    >
      <p v-if="price">{{price}}</p>
      <p
        class="time-line"
        v-if="showTimeDivideLine"
      ></p>
      <p v-if="startTime">{{startTime}}</p>
      <p v-if="endTime">{{endTime}}</p>
      <p
        v-if="nextTime"
        @click="gototimetable"
      >
        {{nextTime}}
        <i class="iconfont icon-rightangel"></i>
      </p>
    </div>
  </div>
</template>

<script>
import RouteInfoModel from '../model/RouteInfoModel.js'
export default {
  components: {

  },
  props: {
    routeInfo: {
      type: RouteInfoModel,
      default: null
    }
  },
  data() {
    return {
    }
  },
  computed: {
    canChangeDirection() {
      return this.routeInfo && this.routeInfo.directionList && this.routeInfo.directionList.length > 1
    },
    price() {
      if (this.routeInfo && this.routeInfo.price) {
        return '票价 ' + this.routeInfo.price
      }
      return ''
    },
    startTime() {
      if (this.routeInfo && this.routeInfo.startTime) {
        return '首 ' + this.routeInfo.startTime
      }
      return ''
    },
    endTime() {
      if (this.routeInfo && this.routeInfo.endTime) {
        return '末 ' + this.routeInfo.endTime
      }
      return ''
    },
    nextTime() {
      if (this.routeInfo && this.routeInfo.nextTime) {
        return '下一班 ' + this.routeInfo.nextTime
      }
      return ''
    },
    showTimeDivideLine() {
      return this.price && (this.startTime || this.endTime || this.nextTime)
    },
    showPriceLine() {
      if (!this.price && !this.startTime && !this.endTime && !this.nextTime) {
        return false
      }
      return true
    }
  },
  methods: {
    changeDirection() {
      // this.$emit('changeDirection')
      if (this.canChangeDirection) {
        this.$EventBus.$emit('changeDirection')
      }
    },
    // 跳转时刻表页面
    gototimetable() {
      let str = `routeid=${this.routeInfo.routeId}&direction=${this.routeInfo.direction}&linename=${this.routeInfo.routeName}&` +
        `startstation=${encodeURIComponent(this.routeInfo.startStation)}&` +
        `endstation=${encodeURIComponent(this.routeInfo.endStation)}`
      this.$RouteTableUtils.goToTimeTable(str)
    }
  }
}
</script>

<style>
.route-header {
  width: 650px;
  padding: 0 50px 20px 50px;
  background-color: #ffffff;
}
.route-station-wrapper {
  height: 125px;
  color: #333333;
  font-weight: bold;
}
.route-station-wrapper > p {
  width: 296px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.reverse-btn {
  padding: 30px;
}
.reverse-btn > i {
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  font-size: 30px !important;
}
.reverse-i-ccc {
  background-color: #cccccc;
}
.price-time-wrapper {
  width: 100%;
  height: 84px;
  color: #b0b8ba;
}
.price-time-wrapper > p {
  margin: 0 15px;
}
.time-line {
  width: 1px; /*no*/
  height: 30px;
  background-color: #cccccc;
  margin: 0 0 0 30px;
}
.price-time-wrapper .icon-rightangel {
  font-size: 22px;
  margin: 0 0 0 15px;
}
</style>
